<script setup lang="ts">
import { onMounted, onUnmounted, reactive } from 'vue'
import {
    Back,
    Right,
    RefreshRight,
    House,
    Search,
    Star,
    StarFilled,
    Setting,
    Ship,
    ChatDotSquare
} from '@element-plus/icons-vue'
import CollectionTop from './CollectionTop.vue'
import { merge } from 'lodash-es'

const props = defineProps({
    autoFullScreen: {
        type: Boolean,
        default: false
    },
    menus: {
        type: Array<Collection>,
        default: []
    },
    count: {
        type: Number,
        default: 0
    },
    verticalWebsiteHost: {
        type: Array<String>,
        default: []
    }
})

const emit = defineEmits(['ship', 'star'])

const ship = (visible: boolean) => {
    emit('ship', visible, webview.vertical)
    window.ipcRenderer.send('toggle-popup', visible)
    if (visible) {
        // 运行网页全屏脚本
        webview.element.executeJavaScript(`${props.autoFullScreen} && setTimeout(topVideo, 0)`, true)
        // 运行特殊网站脚本
        webview.element.executeJavaScript('setTimeout(handleSpecialWebsite, 0)', true)
    }
}

const star = () => {
    if (webview.favoriteIndex >= 0) {
        props.menus.splice(webview.favoriteIndex, 1)
        webview.favoriteIndex = -1
    } else {
        props.menus.push({ url: webview.src, title: webview.title, id: window.electronIpc.randomUUID() })
        webview.favoriteIndex = props.menus.length - 1
    }
    emit('star', props.menus)
}

defineExpose({
    ship
})

const webview = reactive({
    src: '',
    title: '',
    back: false,
    forward: false,
    element: null as any,
    favoriteIndex: -1,
    home: 'https://www.bing.com',
    vertical: false // 竖屏模式
})

const handleSearch = () => {
    if (webview.src.startsWith('http://') || webview.src.startsWith('https://')) {
        webview.element.src = webview.src
    } else {
        webview.element.src = `https://www.bing.com/search?q=${webview.src}`
    }
    webview.element.focus()
}

const handleLoadHash = (hash: string) => {
    window.ipcRenderer.send('load-hash', hash)
}

onUnmounted(() => {
    merge(window.F, {
        title: webview.title,
        src: webview.src,
        vertical: webview.vertical
    })
})

onMounted(() => {
    webview.element = document.getElementById('website') as HTMLWebViewElement

    window.F && merge(webview, {
        src: window.F.src || '',
        title: window.F.title || '',
        vertical: window.F.vertical || false
    })

    webview.element.addEventListener('dom-ready', () => {
        const url = webview.element.getURL()

        merge(webview, {
            title: webview.element.getTitle(),
            src: decodeURIComponent(url),
            back: webview.element.canGoBack(),
            forward: webview.element.canGoForward(),
            favoriteIndex: props.menus.findIndex(item => item.url === url),
            vertical: props.verticalWebsiteHost.some(w => url.includes(w))
        })
    })

    webview.element.addEventListener('did-finish-load', () => {
        // webview.element.openDevTools()

        // 插入js
        webview.element.executeJavaScript(window.electronIpc.insertJs, true)
    })
})
</script>
<template>
    <el-row class="search">
        <el-button-group>
            <el-button text title="上一页" :disabled="!webview.back" :icon="Back" @click="webview.element.goBack()" />
            <el-button text title="下一页" :disabled="!webview.forward" :icon="Right"
                @click="webview.element.goForward()" />
            <el-button text title="刷新" :icon="RefreshRight" @click="webview.element.reload()" />
            <el-button text title="首页" :icon="House" @click="webview.element.src = webview.home" />
        </el-button-group>
        <el-input v-model="webview.src" placeholder="在 Microsoft Bing 中搜索，或输入网址" :prefix-icon="Search"
            @keyup.enter="handleSearch" />
        <el-button-group>
            <el-button text :icon="webview.favoriteIndex >= 0 ? StarFilled : Star"
                :title="webview.favoriteIndex >= 0 ? '取消收藏' : '收藏'" @click="star" />
            <el-button class="primary" type="primary" text :icon="Ship" title="摸鱼，启动" @click="ship(true)" />
            <el-button class="success" type="success" text :icon="ChatDotSquare" title="摸鱼，启动"
                @click="handleLoadHash('/wechat')" />
            <el-button text :icon="Setting" title="设置" @click="handleLoadHash('/setting')" />
        </el-button-group>
    </el-row>
    <collection-top :count="props.count" :menus="props.menus" />
</template>
<style lang="scss" scoped>
.search {
    padding: 5px;
    background-color: #fff;

    .el-input {
        margin: 0 5px;
        width: calc(100% - 173px - 173px - 10px);
    }

    :deep(.el-button-group) {
        .el-button.success.is-text:not(.is-disabled):hover {
            background-color: #67c23a;
            color: #ffffff;
        }

        .el-button.primary.is-text:not(.is-disabled):hover {
            background-color: #409eff;
            color: #ffffff;
        }
    }
}
</style>